@extends('layouts.back_stage')
@section('content') 
  <style>
   .pagination{float:right;}
   /* .container{background:#fff;margin:20px 0 0 10px} */
    #app{padding:20px 0 0 10px}
    .back{background:#fff;margin:20px;padding:10px}
    /* h2{font-size:28px;font-weight:900} */
    .type_x{margin:40px 0 0 20px;}
    .fount_c{color:#001;}
    .ingred_sel{width:150px;margin:0 10px 0 10px}
    .input_font{width:170px;height:14px;margin:0 40px 0 15px}
    .table_margin{margin-top:40px;text-align:center}
    .add_s{margin:20px 0 0 20px}
    .caser{width:300px}
    .addsert{font-weight:500;margin:20px 0 0 30px}
    .input_add{width:300px;margin-left:13px;}
    .input_disscount{width:120px;margin-right:40px}
    .disscount{margin:20px 0 40px 20px;}
    .tab_mian{border:1px solid #000}
    .tab_but{border-bottom:1px solid #000}
    .butt{width:100px}
    .tab_show{margin:10px 0 20px 20px}
    .sales h3{margin:10px 0 20px 20px}
    .form_t{margin-left:40px}
    p{margin:20px 0}
    .rest{margin:10px 0 0 40px}
    .rest_a{margin:40px 0}
    .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
  .el-upload-list{width:300px}
  .el-upload__input{opacity:0}
  .aa{margin-left:-150px;color:#ccc;width:120px}
  </style>
  <div class="container">
  <div class="page-body" id="app">
    <el-form  ref="ruleForm" v-model="ruleForm"   class="demo-ruleForm">
         <div class="header"><h3>客户基本信息</h3></div>
         <div class="back">
         <div class="type_x">
          <label>类型</label>
          <select class="ingred_sel one"  v-model="ruleForm.type" name="supplier">
              <option value="">请选择</option>  
              <option value="1">代理商</option>                                      
              <option value="2">分公司</option>
                                                                                      
            </select>
          <label>所属机构</label>
            <select class="ingred_sel two" v-model="ruleForm.pid" name="supplier">
              <option value="">请选择</option>  
              @foreach($clients as $client)
                <option value="{{isset($client->name)?$client->id:'0'.$client->id}}">{{$client->name or $client->company_name}}</option>
              @endforeach                                                                         
            </select>
          <label>客户名称</label>
              <el-input  class="ingred_sel" v-model="ruleForm.name" size="small" placeholder="请输入"></el-input>
          <label>手机号码</label>
            <el-input  class="ingred_sel" v-model="ruleForm.tel" size="small" placeholder="1开头的11位数"></el-input>
         </div>
         <div class="add_s">
            <label>省市区：</label>
            <el-cascader
                  :options="options"       
                  class='caser'
                  size="small"
                  v-model="ruleForm.area"
                  @focus="handleChange">
                </el-cascader>
            </div>
            <div class="addsert">
            <label>地址:</label>
                <el-input  class="input_add on"  v-model="ruleForm.address" size="small" placeholder="请输入 格式为 中文"></el-input>
            </div>
            <div class="disscount">
                <label>默认拿货折扣%:</label>
                    <el-input  class="input_disscount on" v-model="ruleForm.discount_default" size="small"placeholder="请输入0-100数"></el-input>
                <label>店铺系统:</label>
                      <el-checkbox label="不开通" v-model="checked"></el-checkbox>
                      <el-checkbox label="直营店" disabled></el-checkbox>
                      <el-checkbox label="联营店" disabled></el-checkbox>
                      <el-checkbox label="加盟店" disabled></el-checkbox>
                      <el-checkbox label="折扣店" disabled></el-checkbox>
              </div>
             </div>
             <div class="font_a"><h3>政策信息</h3></div>
             <div class="back">
             <el-tabs  type="border-card" disabled="true" v-model="ruleForm.type_form" >
                <el-tab-pane label="订货"  name="1" >
                <div class="tab_show">
                    <label>折扣%:</label>
                    <el-input  class="input_disscount on"  v-model="ruleForm.policy_discount" size="small" placeholder="请输入0-100数"></el-input>
                  </div>
                  <div class="sales">
                  <h4>退货率：</h4>
                  <el-form :inline="true"  class="demo-form-inline form_t">
                   <div>
                      <el-form-item label="第一季度：">
                     
                        <el-input v-model="ruleForm.first_rate"  size="small" placeholder="请输入0-100的数"></el-input>
                      </el-form-item>
                      <el-form-item label="退货期限： 选择日期">
                          <el-date-picker
                          v-model="ruleForm.first_daterange"
                            type="datetimerange"
                            size="small"
                            value-format="yyyy-MM-dd hh:mm:ss"
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期">
                          </el-date-picker>
                      </el-form-item>
                      </div>
                      <div>
                      <el-form-item label="第二季度：">
                        <el-input v-model="ruleForm.second_rate" size="small" placeholder="请输入0-100的数"></el-input>
                      </el-form-item>
                      <el-form-item label="退货期限： 选择日期">
                          <el-date-picker
                          v-model="ruleForm.second_daterange"
                            type="datetimerange"
                            value-format="yyyy-MM-dd hh:mm:ss"
                            size="small"
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期">
                          </el-date-picker>
                      </el-form-item>
                      </div>
                      <div>
                      <el-form-item label="第三季度：">
                        <el-input v-model="ruleForm.third_rate" size="small" placeholder="请输入0-100的数"></el-input>
                      </el-form-item>
                      <el-form-item label="退货期限： 选择日期">
                          <el-date-picker
                          v-model="ruleForm.third_daterange"
                            type="datetimerange"
                            size="small"
                            value-format="yyyy-MM-dd hh:mm:ss"
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期">
                          </el-date-picker>
                      </el-form-item>
                      </div>
                      <div>
                      <el-form-item label="第四季度：">
                        <el-input v-model="ruleForm.fourth_rate" size="small" placeholder="请输入0-100的数"></el-input>
                      </el-form-item>
                      <el-form-item label="退货期限： 选择日期">
                          <el-date-picker
                            v-model="ruleForm.fourth_daterange"
                            type="datetimerange"
                            size="small"
                            value-format="yyyy-MM-dd hh:mm:ss"
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期">
                          </el-date-picker>
                      </el-form-item>
                      </div>
                      <div>
                      <el-form-item label="全年总数：">
                        <el-input v-model="ruleForm.year_rate"  size="small" placeholder="请输入0-100的数"></el-input>
                      </el-form-item>
                      <el-form-item label="退货期限： 选择日期">
                          <el-date-picker
                          v-model="ruleForm.year_daterange"
                            type="datetimerange"
                            size="small"
                            value-format="yyyy-MM-dd hh:mm:ss"
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期">
                          </el-date-picker>
                      </el-form-item>
                      </div>
                    
                    </el-form>
                </div>
                </el-tab-pane>
                <el-tab-pane label="代理" disabled name="2">代理
               
                </el-tab-pane>
                <el-tab-pane label="买断" disabled name="3">买断
                
                 </el-tab-pane>
                <el-tab-pane label="铺货" disabled name="4">铺货
                
                </el-tab-pane>
              </el-tabs>
             
                </div>
              <div class="uplading">
                  <div class="font_a"><h3>合同管理</h3></div>
                  <div class="back">
                  <p>协议附件</p>
                 
                    <el-upload
                      class="upload-demo"
                      ref="upload"
                      action="/clients/uploadagreement"
                      :on-change="handlePreview"
                      :on-remove="handleRemove"
                     
                      :file-list="fileList"
                      :auto-upload="false">
                      <el-button slot="trigger"  class='aa' size="small" >选取文件</el-button>
                      <div slot="tip" class="el-upload__tip">支持扩展名：.doc .docx .pdf .jpg.png. ...</div>
                    </el-upload>

         
                  </div> 
                </div> 
                <!-- <div class="rest">
                    <div class="font_a"><h3>其他信息</h3></div>
                    <div class="rest_a">
                      <label>类型</label>
                       <select class="ingred_sel on" name="supplier"></select>
                    </div>
               </div> -->
               <el-form-item>
                   <el-button type="primary" class="rest" size="small" @click="formSubmit">立即创建</el-button>
                   <el-button  size="small" @click="resetForm">重置</el-button>
              </el-form-item>
      </el-form>
  </div>
  </div>
 <script>
   const App=new Vue({
        el: '#app',
        data() {
          return {
            fileList: [],
            ruleForm:{
              type:'',//类型
              pid:'',//所属机构
              name:'',//名称
              tel:'',//手机号
              address:'',//地址
              discount_default:'',//折扣
              type_form:'1',//tab
              policy_discount:'',//实际折扣
              first_rate:'',//第一季度
              second_rate:'',//第二季度
              third_rate:'',//第三季度
              fourth_rate:'',//第四季度
              year_rate:'',//全年
              first_daterange:'',//第一季度时间
              second_daterange:'',//第二季度时间
              third_daterange:'',//第三季度时间
              fourth_daterange:'',//第四季度时间
              year_daterange:'',//全年时间
              policy_type:'1',
             // area:"",//,
              area_bh:''
            },
             options: [],
             checked: true,//多选框默认
             //三级联动下拉内容
         
            imageUrl: ''
            }
            
          },
          methods: {
            handleRemove(file, fileList) {
                  console.log(file, fileList);
                },
                handlePreview(file,fileList) {
                  
                  console.log(111,fileList);
                 // console.log(222,this.fileList);
                },
               
              
           
            //这是三级联动的
          handleChange(value) {
            const that=this;
            $.ajax({
              type:'get',
              url:'/clients/address'
            }).then(function(response){
               let data=response
               const options = [];
               for (let item in data) {

                let province = {
                        value: data[item].value,
                        label: data[item].label,
                        children: []
                    };
                    for (let city in data[item].children) {
                      let counties=[];
                      for (let county in data[item].children[city].children) {
                            let cityno=data[item].children[city].children[county];
                            counties.push({value:cityno.value,label:cityno.label});
                        }
                        province.children.push({
                            value: data[item].children[city].value,
                            label: data[item].children[city].label,
                            children:counties
                        });
                    }
                        options.push(province)
                  }
                  that.$data.options=options;
                })
               
          },
          //提交
          formSubmit(){
            let that=this
            var  dx={}
             if(this.ruleForm.type!=''){
                if(this.ruleForm.pid!=''){
                  if(this.ruleForm.name!=''){ 
                       if(this.ruleForm.tel!=''){
                          var moder=/^1\d{10}$/ 
                       if(moder.test(this.ruleForm.tel)){  
                           if(this.area_bh!=''){
                             if(this.ruleForm.address!=''){
                               var chinese=/^(?!_)(?!.*?_$)[a-zA-Z0-9_\u4e00-\u9fa5]+$/
                               if(chinese.test(this.ruleForm.address)){
                              if(this.ruleForm.discount_default!=''){
                                 var re=/^(?:[1-9]?\d|100)$/;
                                 if(re.test(this.ruleForm.discount_default)){
                                if(this.ruleForm.type_form!=''){
                                   var rest=/^(?:[1-9]?\d|100)$/;            
                                  if(this.ruleForm.policy_discount!=''){
                                     if(rest.test(this.ruleForm.policy_discount)){

                                       var arr=this.ruleForm.area
                                        
                                          this.ruleForm.area_bh=this.ruleForm.area[2];
                                         
                                       //  console.log(this.ruleForm)
                                      $.ajax({
                                          type:"post",
                                          url:"/clients/store",
                                           data:this.ruleForm,
                                          success: function (res) {
                                           // console.log(res)
                                           window.location.href = "/clients/index"; 
                                            that.$notify.success({
                                                  title: '提示',
                                                  message: '审核提交成功',
                                              });
                                              
                                          }
                                        })

                              }else{
                                          this.$message({
                                          message: '实际折扣格式是0-100以内的数',
                                          type: 'warning'
                                        });
                                    }  
                            }else{
                                this.$message({
                                message: '请填写实际折扣',
                                type: 'warning'
                              });
                            }
                          
                          }else{
                              this.$message({
                              message: '请选择政策信息',
                              type: 'warning'
                            });
                          }
                         }else{
                            this.$message({
                            message: '默认折扣格式是0-100以内的数',
                            type: 'warning'
                          });
                       } 
                        }else{
                            this.$message({
                            message: '请填写默认折扣',
                            type: 'warning'
                          });
                        }
                     
                         }else{
                          this.$message({
                          message: '地址格式不对 只能数字、字母、下划线不能以下划线开头和结尾',
                          type: 'warning'
                        });
                        }
                    }else{
                      this.$message({
                          message: '请填写具体地址',
                          type: 'warning'
                        });
                    } 

                   }else{
                        this.$message({
                          message: '省市区不能为空',
                          type: 'warning'
                        });
                      } 
                      }else{
                        this.$message({
                          message: '手机号码格式有问题 请输入以1开头的11位数',
                          type: 'warning'
                        });
                      } 
                   
                    }else{
                      this.$message({
                      message: '请填写手机号码',
                      type: 'warning'
                    });
                    }
                 
                  }else{
                      this.$message({
                      message: '请填写名称',
                      type: 'warning'
                    });
                  }
                }else{
                  this.$message({
                    message: '请选择机构',
                    type: 'warning'
                  });
                }
            }else{
              this.$message({
                message: '请选择类型',
                type: 'warning'
              });
             }
          },
          //重置清空
          resetForm(){
           
            this.ruleForm.type_form='';
            this.ruleForm=''
            this.$notify({
                title: '成功',
                message: '重置清空成功',
                type: 'success'
              });
         
         
          },
          getData(){
            $.ajax({
              post:'post',
              url:'/clients/address',
              data:{},
              sccess:function(res){
                console.log(res)
              }
            })
          },
         
        },
        mounted() {
         
        },
   });   
 
 </script>

@endsection